<template>
  <div class="head">
    <h2>TodoList</h2>
    <input type="text" placeholder="请输入待办事项..." :value="content" @input="handleInput" />
    <button @click="handleAdd">添加</button>
  </div>
</template>

<script setup>
import { inject } from 'vue';

// 注入父组件提供的内容和添加方法
const content = inject('content');
const handleAdd = inject('handleAdd');

const handleInput = e => {
  content.value = e.target.value;
};
</script>

<style scoped>
.head {
  width: 100%;
  background: rgb(11, 135, 255);
  text-align: center;
}

.head h2 {
  color: #fff;
}

.head input {
  width: 300px;
  height: 30px;
  padding-left: 5px;
  margin: 10px 0;
  border: none;
  outline: none;
  border-radius: 3px;
}

.head button {
  width: 10%;
  height: 30px;
  margin-left: 5px;
  color: #0b87ff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.head button:hover {
  color: red;
}
</style>
